<template>
  <div class="product-detail">
    <div class="subtitle"><span>{{ $t('navbar.product') }}&nbsp;&gt;&nbsp;</span><!-- <span>{{productName}}&nbsp;&gt;&nbsp;</span> --><span>{{ $t('navbar.detail') }}</span></div>
    <div class="param" v-html="detail"></div>
    <div class="foo-btn">
      <router-link to="/homepage">【{{ $t('navbar.home') }}】</router-link>
      <a @click="back()">【{{ $t('navbar.return') }}】</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'product-detail',
    data() {
      return {
        detail: ''
      }
    },
    mounted() {
      this.getDetail();
    },
    computed: {
      type: function(){
        return this.$route.params.type;
      },
      pId: function(){
        return this.$route.params.pId;
      },
      productName: function() {
        switch(Number(this.type)) {
          case 1: 
            return '雷达物位计';
            break;
          case 2: 
            return '超声波液位计';
            break;
          case 3: 
            return '电动执行机构';
            break;
          case 4: 
            return '流量计';
            break;
          case 5: 
            return '二次仪表';
            break;
        }
      }
    },
    methods: {
      getDetail() {
        let that = this;
        this.$axios.get('/pc.php/goods/goodsInfo', {
          params: {
            goods_id: that.pId
          }
        }).then(res => {
          that.detail = res.data.describe;
        })
      },
      back() {
        window.history.back();
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-detail {
    .foo-btn {
      text-align: center;
      >a {
        cursor: pointer;
        color: #666;
        &:hover {
          color: #006d60; 
        }
      }
    }
    .param {
      margin-top: 10px;
      padding-left: 20px;
      font-size: 14px;
      line-height: 30px;
      color: #777;
      .On-xs({
        padding-left: 0px;
      });
    }
  }
</style>